<template>
  <div>
    <el-main>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <h2 style="margin-right: 10px;">{{ productName }}：{{ productCode }}
          <i class="fa fa-copy" @click="copyProductCode" style="cursor: pointer; margin-left: 10px;"></i>

        </h2>
        <div style="display: flex; justify-content: flex-end; align-items: center;">
          <el-button type="primary" class="solid-button" style="margin-right: 10px;"
           @click="handleBack">返回</el-button>
        </div>
      </div>
      <el-divider></el-divider>

      <!-- 详细信息部分 -->
      <div style="margin-top: 20px; display: flex;">
        <!-- 轮播图部分 -->
        <div style="width: 30%; margin-right: 20px;">
          <el-carousel :interval="3000" arrow="always" height="300px">
            <el-carousel-item v-for="(image, index) in images" :key="index">
              <img :src="image" alt="carousel image" style="width: 100%; height: 100%; object-fit: cover;">
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 详细信息部分 -->
        <div style="width: 70%; ">
          <el-row :gutter="24">
            <el-col :span="20" style="margin-left: 20px;">
              <el-row :gutter="20">
                <el-col :span="10">
                  <span class="info">入库参考价:</span>
                  <span class="info-value" style="color: red;">{{ inboundPrice | formatPrice}}</span>
                </el-col>
                <el-col :span="10">
                  <span class="info">出库参考价:</span>
                  <span class="info-value" style="color: red;">{{ outboundPrice | formatPrice }}</span>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <span class="info">货品类型</span>
                  <span class="info-value">{{ productTypeName }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="info">规格型号</span>
                  <span class="info-value">{{ productModel }}</span>
                </el-col>
                
                <el-col :span="8">
                  <span class="info">单位</span>
                  <span class="info-value">
                    {{ productUnit }}
                  </span>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <span class="info">预警天数</span>
                  <span class="info-value">{{ warningDays }}天</span>
                </el-col>
                <el-col :span="8">
                  <span class="info">状态</span>
                  <span class="info-value"
                    :style="{ color: productStatus === '1' ? 'green' : 'red' }">{{ productStatus === '1' ? '启用' : '停用' }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="info">排序</span>
                  <span class="info-value">{{ sort }}</span>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <span class="info">供货商</span>
                  <span class="info-value">
                    {{ supplierName }}
                  </span>
                </el-col>
                <el-col :span="8">
                  <span class="info">保质期</span>
                  <span class="info-value">
                    {{ shelfLifeDays }} {{ shelfLifeUnit }}
                  </span>
                </el-col>
                 <el-col :span="8">
                  <span class="info">保质期管理</span>
                  <span class="info-value">{{ isEnable }}</span>
                </el-col>
              </el-row>
              <el-row :gutter="20">
              <el-col :span="8">
                  <span class="info">备注</span>
                  <span class="info-value">{{ productRemark }}</span>
                </el-col>
            </el-row>
            </el-col>
          </el-row>
          <el-footer>
            <el-divider></el-divider>
            <el-row :gutter="20">
              <el-col :span="4">
                <span class="info">创建人</span>
                <span class="info-value" style="min-width: 50px;">{{ createBy }}</span>
              </el-col>
              <el-col :span="8">
                <span class="info">创建时间</span>
                <span class="info-value">{{ createTime }}</span>
              </el-col>
              <el-col :span="4">
                <span class="info">更新人</span>
                <span class="info-value" style="min-width: 50px;">{{ updateBy }}</span>
              </el-col>
              <el-col :span="8">
                <span class="info">更新时间</span>
                <span class="info-value">{{ updateTime }}</span>
              </el-col>
            </el-row>
          </el-footer>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
 import { selectProductDetails} from "@/api/product/product";

  export default {
    name: "Detail",
    data() {
      return {
        // 数据初始化
        shelfLifeUnit: '',
        isEnable: '',
        shelfLifeDays:'',
        supplierName:'',
        productCode: '',
        productId: '',
        productName: '',
        productTypeName: '',
        sort: '',
        productStatus: '1', // 状态字段
        productModel: '',
        outboundPrice: '',
        inboundPrice: '',
        productUnit: '',
        warningDays: '',
        productRemark: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        images: [],
      };
    },
    created() {
      this.fetchData();
    },
  methods: {
    fetchData() {
      // 获取 URL 参数
      const productId = this.$route.params.productId;
      // 调用接口获取数据
      selectProductDetails(productId).then(response => {
        console.log(response);
        console.log(response.image)
        // 将数据赋值给组件的属性
        this.productCode = response.productCode;
        this.productName = response.productName;
        this.sort = response.sort;
        this.productTypeName = response.productTypeList[0].productTypeName;
        this.supplierName = response.pySuppliersList[0].supplierName;
        this.shelfLifeDays=response.shelfLifeDays;
        this.productStatus = response.productStatus;
        this.productModel = response.productModel;
        this.outboundPrice = response.outboundPrice;
        this.inboundPrice = response.inboundPrice
        this.productUnit = response.dictLabel;
        this.warningDays = response.warningDays;
        this.productRemark = response.productRemark;
        this.createBy = response.createBy;
        this.createTime = response.createTime;
        this.updateBy = response.updateBy;
        this.updateTime = response.updateTime;
        this.isEnable = response.isEnable;

          if (response.image != null && response.image != '') {
            // 将 response.image字段拆分为图片路径数组
            this.images = response.image.split(',');
          } else {
            //给定一张默认图片
            this.images = ['http://127.0.0.1:9300/statics/2024/11/27/照片2_20241127165610A002.jpg'];
          }

          //保质期单位判断
          if (response.shelfLifeUnit == 0) {
            this.shelfLifeUnit = '年';
          }else if(response.shelfLifeUnit == 1){
            this.shelfLifeUnit = '月';
          } else {
            this.shelfLifeUnit = '日';
          }

        //保质期是否开启判断
          if (response.isEnable == 1) {
            this.isEnable = '开启';
          }else {
            this.isEnable = '关闭';
          }
      });
    },
     copyProductCode() {
        const text = this.productCode;
        navigator.clipboard.writeText(text).then(() => {
          Message.success('复制成功！');
        }).catch(err => {
          Message.error('复制失败！');
        });
      },
   copyProductCode() {
      const el = document.createElement('textarea');
      el.value = this.productCode;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);

      this.$message.success('产品编号已复制到剪贴板');
    },
     copyItemCode() {
        const text = this.productCode;
        navigator.clipboard.writeText(text).then(() => {
          Message.success('复制成功！');
        }).catch(err => {
          Message.error('复制失败！');
        });
      },

    toggleStatus() {
      const productId = this.$route.params.productId;
      const newState = this.productStatus === '1' ? '0' : '1';
      this.productStatus = newState
      event.preventDefault(); // 阻止默认的焦点行为

      const item = {
        productId: productId,
        productStatus: newState
      }
    },
    /** 返回到上一个页面 */
      handleBack() {
        // this.$router.push('/goods/product');
        this.$router.go(-1);
      },
  },
  filters: {
      formatPrice(value) {
        if (!value) return '0.00';
        return parseFloat(value).toFixed(2);

      }
    },
  };
</script>

<style>
  

  .solid-button {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #a4a4a4;
  }

  ::v-deep .el-table-fixed {
    height: 0px;
  }


  .el-main {
    color: #333;
    margin: 1%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .el-row {
    margin-top: 20px;
  }

  .info {
    font-weight: bold;
    /* 使文字加粗 */
    color: #333;
    /* 文字颜色 */
    margin-right: 30px;
    /* 文字与后续内容的间距 */
  }

  .el-divider--horizontal {
    height: 2px;
  }

  .info-value {
    color: #999999;
    display: inline-block;
    min-width: 150px;
    /* 根据需要调整 */
  }
</style>
